<template>
  <div class="admin-questions-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">题目管理</h1>
      <p class="page-subtitle">管理系统中的题目、答案和解析</p>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="search-filters">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索题目内容或ID"
          prefix-icon="Search"
          class="search-input"
          @keyup.enter="searchQuestions"
        />
        <el-select v-model="questionType" placeholder="题目类型" class="type-select">
          <el-option label="全部" value="" />
          <el-option label="单选题" value="single" />
          <el-option label="多选题" value="multiple" />
          <el-option label="判断题" value="judgment" />
          <el-option label="简答题" value="essay" />
        </el-select>
        <el-select v-model="questionDifficulty" placeholder="难度等级" class="difficulty-select">
          <el-option label="全部" value="" />
          <el-option label="简单" value="easy" />
          <el-option label="中等" value="medium" />
          <el-option label="困难" value="hard" />
        </el-select>
        <el-select v-model="questionCategory" placeholder="题目分类" class="category-select">
          <el-option label="全部" value="" />
          <el-option label="行测-常识判断" value="常识判断" />
          <el-option label="行测-言语理解" value="言语理解" />
          <el-option label="行测-数量关系" value="数量关系" />
          <el-option label="行测-判断推理" value="判断推理" />
          <el-option label="行测-资料分析" value="资料分析" />
          <el-option label="申论" value="申论" />
        </el-select>
      </div>
      <div class="toolbar-actions">
        <el-button type="primary" @click="addQuestion">新增题目</el-button>
        <el-button type="default" @click="importQuestions">导入题目</el-button>
        <el-button type="default" @click="exportQuestions">导出题目</el-button>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <span class="stat-number">{{ totalQuestions }}</span>
          <span class="stat-label">题目总数</span>
        </div>
        <el-icon class="stat-icon"><Document /></el-icon>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <span class="stat-number">{{ todayAdded }}</span>
          <span class="stat-label">今日新增</span>
        </div>
        <el-icon class="stat-icon"><Add /></el-icon>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <span class="stat-number">{{ pendingReview }}</span>
          <span class="stat-label">待审核</span>
        </div>
        <el-icon class="stat-icon"><Hourglass /></el-icon>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <span class="stat-number">{{ errorQuestions }}</span>
          <span class="stat-label">错误题目</span>
        </div>
        <el-icon class="stat-icon"><Warning /></el-icon>
      </el-card>
    </div>

    <!-- 题目表格 -->
    <el-card class="table-card">
      <el-table
        v-loading="isLoading"
        :data="questionsData"
        style="width: 100%"
        border
        highlight-current-row
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="questionId" label="题目ID" width="120" />
        <el-table-column prop="content" label="题目内容" min-width="300">
          <template #default="scope">
            <div class="question-content" v-html="truncateContent(scope.row.content)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="题目类型" width="120">
          <template #default="scope">
            <el-tag>{{ getTypeLabel(scope.row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="100">
          <template #default="scope">
            <el-tag :class="getDifficultyClass(scope.row.difficulty)">{{ getDifficultyLabel(scope.row.difficulty) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="150" />
        <el-table-column prop="usageCount" label="使用次数" width="100" />
        <el-table-column prop="correctRate" label="正确率" width="100">
          <template #default="scope">
            <span class="correct-rate">{{ (scope.row.correctRate * 100).toFixed(1) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="viewQuestionDetail(scope.row)">查看</el-button>
            <el-button type="default" size="small" @click="editQuestion(scope.row)">编辑</el-button>
            <el-button type="default" size="small" class="text-danger" @click="deleteQuestion(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 题目详情模态框 -->
    <el-dialog v-model="showQuestionDetailModal" title="题目详情" width="800px" append-to-body>
      <div v-if="selectedQuestion" class="question-detail">
        <div class="detail-header">
          <div class="question-info">
            <span class="question-id">ID: {{ selectedQuestion.questionId }}</span>
            <el-tag>{{ getTypeLabel(selectedQuestion.type) }}</el-tag>
            <el-tag :class="getDifficultyClass(selectedQuestion.difficulty)">{{ getDifficultyLabel(selectedQuestion.difficulty) }}</el-tag>
            <span class="category-tag">{{ selectedQuestion.category }}</span>
          </div>
          <div class="question-meta">
            <span class="meta-item">使用次数: {{ selectedQuestion.usageCount }}</span>
            <span class="meta-item">正确率: {{ (selectedQuestion.correctRate * 100).toFixed(1) }}%</span>
            <span class="meta-item">创建时间: {{ selectedQuestion.createTime }}</span>
          </div>
        </div>

        <div class="question-content-detail" v-html="selectedQuestion.content"></div>

        <!-- 选项 -->
        <div v-if="selectedQuestion.options && selectedQuestion.options.length > 0" class="options-section">
          <h4 class="section-title">选项</h4>
          <div class="options-list">
            <div v-for="(option, index) in selectedQuestion.options" :key="index" class="option-item">
              <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
              <span class="option-content" v-html="option"></span>
              <span v-if="selectedQuestion.type === 'single' && index === selectedQuestion.answer" class="correct-option">✓</span>
              <span v-else-if="selectedQuestion.type === 'multiple' && selectedQuestion.answer.includes(index)" class="correct-option">✓</span>
            </div>
          </div>
        </div>

        <!-- 答案 -->
        <div class="answer-section">
          <h4 class="section-title">答案</h4>
          <div class="answer-content">
            <p v-if="selectedQuestion.type === 'single'">
              {{ String.fromCharCode(65 + selectedQuestion.answer) }} - {{ selectedQuestion.options[selectedQuestion.answer] }}
            </p>
            <p v-else-if="selectedQuestion.type === 'multiple'">
              {{ selectedQuestion.answer.map((i: number) => String.fromCharCode(65 + i)).join(', ') }}
            </p>
            <p v-else-if="selectedQuestion.type === 'judgment'">
              {{ selectedQuestion.answer ? '正确' : '错误' }}
            </p>
            <p v-else-if="selectedQuestion.type === 'essay'">
              {{ selectedQuestion.answer }}
            </p>
          </div>
        </div>

        <!-- 解析 -->
        <div v-if="selectedQuestion.explanation" class="explanation-section">
          <h4 class="section-title">解析</h4>
          <div class="explanation-content" v-html="selectedQuestion.explanation"></div>
        </div>

        <!-- 考点 -->
        <div v-if="selectedQuestion.knowledgePoints && selectedQuestion.knowledgePoints.length > 0" class="knowledge-section">
          <h4 class="section-title">考点</h4>
          <div class="knowledge-tags">
            <el-tag v-for="point in selectedQuestion.knowledgePoints" :key="point" closable>
              {{ point }}
            </el-tag>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showQuestionDetailModal = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑题目模态框 -->
    <el-dialog v-model="showAddEditModal" :title="editingQuestion ? '编辑题目' : '新增题目'" width="800px" append-to-body>
      <el-form ref="questionForm" :model="questionForm" label-width="100px" :rules="questionRules">
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="questionForm.type" placeholder="请选择题目类型" @change="handleTypeChange">
            <el-option label="单选题" value="single" />
            <el-option label="多选题" value="multiple" />
            <el-option label="判断题" value="judgment" />
            <el-option label="简答题" value="essay" />
          </el-select>
        </el-form-item>
        <el-form-item label="题目分类" prop="category">
          <el-select v-model="questionForm.category" placeholder="请选择题目分类">
            <el-option label="行测-常识判断" value="常识判断" />
            <el-option label="行测-言语理解" value="言语理解" />
            <el-option label="行测-数量关系" value="数量关系" />
            <el-option label="行测-判断推理" value="判断推理" />
            <el-option label="行测-资料分析" value="资料分析" />
            <el-option label="申论" value="申论" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度等级" prop="difficulty">
          <el-select v-model="questionForm.difficulty" placeholder="请选择难度等级">
            <el-option label="简单" value="easy" />
            <el-option label="中等" value="medium" />
            <el-option label="困难" value="hard" />
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容" prop="content">
          <el-input
            v-model="questionForm.content"
            type="textarea"
            rows="4"
            placeholder="请输入题目内容"
          />
        </el-form-item>
        <el-form-item v-if="questionForm.type !== 'judgment' && questionForm.type !== 'essay'" label="选项">
          <div v-for="(_option, index) in questionForm.options" :key="index" class="option-input-group">
            <span class="option-input-label">{{ String.fromCharCode(65 + index) }}.</span>
            <el-input
              v-model="questionForm.options[index]"
              placeholder="请输入选项内容"
              class="option-input"
            />
            <el-button
              v-if="questionForm.options.length > 2 && index > 0"
              type="danger"
              size="small"
              @click="removeOption(index)"
            >
              删除
            </el-button>
          </div>
          <el-button type="text" @click="addOption" v-if="questionForm.options.length < 8">
            添加选项
          </el-button>
        </el-form-item>
        <el-form-item label="答案" prop="answer">
          <div v-if="questionForm.type === 'single'">
            <el-select v-model="questionForm.answer" placeholder="请选择正确答案">
              <el-option v-for="(_option, index) in questionForm.options" :key="index" :label="String.fromCharCode(65 + index)" :value="index" />
            </el-select>
          </div>
          <div v-else-if="questionForm.type === 'multiple'">
            <el-select v-model="questionForm.answer" multiple placeholder="请选择正确答案">
              <el-option v-for="(_option, index) in questionForm.options" :key="index" :label="String.fromCharCode(65 + index)" :value="index" />
            </el-select>
          </div>
          <div v-else-if="questionForm.type === 'judgment'">
            <el-radio-group v-model="questionForm.answer">
              <el-radio :label="true">正确</el-radio>
              <el-radio :label="false">错误</el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="questionForm.type === 'essay'">
            <el-input
              v-model="questionForm.answer"
              type="textarea"
              rows="3"
              placeholder="请输入参考答案"
            />
          </div>
        </el-form-item>
        <el-form-item label="解析" prop="explanation">
          <el-input
            v-model="questionForm.explanation"
            type="textarea"
            rows="4"
            placeholder="请输入解析内容"
          />
        </el-form-item>
        <el-form-item label="考点">
          <el-input
            v-model="newKnowledgePoint"
            placeholder="输入考点并按回车"
            @keyup.enter="addKnowledgePoint"
            class="knowledge-input"
          />
          <div class="knowledge-tags">
            <el-tag
              v-for="(point, index) in questionForm.knowledgePoints"
              :key="index"
              closable
              @close="removeKnowledgePoint(index)"
            >
              {{ point }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeAddEditModal">取消</el-button>
        <el-button type="primary" @click="saveQuestion">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 搜索和筛选条件
const searchKeyword = ref('');
const questionType = ref('');
const questionDifficulty = ref('');
const questionCategory = ref('');

// 加载状态
const isLoading = ref(false);

// 模态框控制
const showQuestionDetailModal = ref(false);
const showAddEditModal = ref(false);

// 编辑状态
const editingQuestion = ref(false);

// 选择的题目
const selectedQuestion = ref<any>(null);

// 统计数据
const totalQuestions = ref(3250);
const todayAdded = ref(45);
const pendingReview = ref(12);
const errorQuestions = ref(8);

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 3250
});

// 模拟题目数据
const questionsData = ref<any[]>([
  {
    questionId: 'Q001',
    content: '下列不属于公务员法规定的公务员义务的是：<br/>A. 遵守宪法和法律<br/>B. 维护国家的安全、荣誉和利益<br/>C. 申请辞职<br/>D. 全心全意为人民服务',
    type: 'single',
    difficulty: 'easy',
    category: '常识判断',
    options: [
      '遵守宪法和法律',
      '维护国家的安全、荣誉和利益',
      '申请辞职',
      '全心全意为人民服务'
    ],
    answer: 2,
    explanation: '根据《中华人民共和国公务员法》第十四条规定，公务员应当履行下列义务：（一）忠于宪法，模范遵守、自觉维护宪法和法律，自觉接受中国共产党领导；（二）忠于国家，维护国家的安全、荣誉和利益；（三）忠于人民，全心全意为人民服务，接受人民监督；...申请辞职是公务员的权利，不是义务。',
    knowledgePoints: ['公务员法', '公务员义务'],
    usageCount: 1256,
    correctRate: 0.85,
    createTime: '2024-05-10 09:30:00'
  },
  {
    questionId: 'Q002',
    content: '以下哪些属于行政处分的种类？<br/>A. 警告<br/>B. 记过<br/>C. 降职<br/>D. 开除',
    type: 'multiple',
    difficulty: 'medium',
    category: '常识判断',
    options: [
      '警告',
      '记过',
      '降职',
      '开除'
    ],
    answer: [0, 1, 3],
    explanation: '根据《中华人民共和国公务员法》第六十二条规定，处分分为：警告、记过、记大过、降级、撤职、开除。降职不属于行政处分的种类。',
    knowledgePoints: ['公务员法', '行政处分'],
    usageCount: 892,
    correctRate: 0.72,
    createTime: '2024-05-09 14:20:00'
  },
  {
    questionId: 'Q003',
    content: '判断：公务员的考核分为平时考核和定期考核，定期考核以平时考核为基础。',
    type: 'judgment',
    difficulty: 'easy',
    category: '常识判断',
    answer: true,
    explanation: '根据《中华人民共和国公务员法》第三十六条规定，公务员的考核分为平时考核、专项考核和定期考核等方式。定期考核以平时考核、专项考核为基础。',
    knowledgePoints: ['公务员法', '考核制度'],
    usageCount: 654,
    correctRate: 0.91,
    createTime: '2024-05-08 11:15:00'
  },
  {
    questionId: 'Q004',
    content: '请简述公务员的回避制度及其意义。',
    type: 'essay',
    difficulty: 'hard',
    category: '常识判断',
    answer: '公务员回避制度是指为了防止公务员因亲属关系等因素对公务活动产生不良影响，而在法律上对公务员在任职和执行公务等方面作出的限制性规定。主要包括任职回避、地域回避和公务回避三种类型。\n\n意义：\n1. 有利于保证公务员公正履行职责，防止权力滥用；\n2. 有利于维护国家机关的形象和公信力；\n3. 有利于保护公务员的合法权益，避免其因亲属关系等因素陷入两难境地；\n4. 有利于促进社会公平正义的实现。',
    explanation: '公务员回避制度是公务员制度的重要组成部分，对于保障公务公正、防止利益冲突具有重要意义。回答时应涵盖回避制度的定义、主要类型和意义等方面。',
    knowledgePoints: ['公务员法', '回避制度'],
    usageCount: 345,
    correctRate: 0.65,
    createTime: '2024-05-07 16:40:00'
  },
  {
    questionId: 'Q005',
    content: '2023年末，某单位有公务员50人，其中男性32人，女性18人。2024年上半年，该单位新录用公务员8人，其中男性5人，女性3人。请问2024年上半年末，该单位女性公务员占比是多少？<br/>A. 35%<br/>B. 36%<br/>C. 37%<br/>D. 38%',
    type: 'single',
    difficulty: 'medium',
    category: '数量关系',
    options: ['35%', '36%', '37%', '38%'],
    answer: 2,
    explanation: '2024年上半年末女性公务员人数 = 18 + 3 = 21人<br/>总人数 = 50 + 8 = 58人<br/>女性公务员占比 = 21 / 58 × 100% ≈ 36.21%，约37%。',
    knowledgePoints: ['百分数计算', '比例问题'],
    usageCount: 987,
    correctRate: 0.78,
    createTime: '2024-05-06 10:30:00'
  }
]);

// 定义题目表单类型接口
interface QuestionForm {
  questionId: string;
  type: string;
  category: string;
  difficulty: string;
  content: string;
  options: string[];
  answer: number | number[] | boolean | string | null;
  explanation: string;
  knowledgePoints: string[];
}

// 题目表单数据
const questionForm = reactive<QuestionForm>({
  questionId: '',
  type: 'single',
  category: '常识判断',
  difficulty: 'easy',
  content: '',
  options: ['', ''],
  answer: null,
  explanation: '',
  knowledgePoints: []
});

// 新考点输入
const newKnowledgePoint = ref('');

// 表单验证规则
const questionRules = {
  type: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
  category: [{ required: true, message: '请选择题目分类', trigger: 'change' }],
  difficulty: [{ required: true, message: '请选择难度等级', trigger: 'change' }],
  content: [{ required: true, message: '请输入题目内容', trigger: 'blur' }],
  answer: [{ required: true, message: '请选择或输入答案', trigger: 'change' }],
  explanation: [{ required: true, message: '请输入解析内容', trigger: 'blur' }]
};

// 截断内容，用于表格显示
const truncateContent = (content: string) => {
  const plainText = content.replace(/<[^>]+>/g, '');
  return plainText.length > 50 ? plainText.substring(0, 50) + '...' : content;
};

// 获取题目类型标签文本
const getTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    single: '单选题',
    multiple: '多选题',
    judgment: '判断题',
    essay: '简答题'
  };
  return typeMap[type] || type;
};

// 获取难度标签文本
const getDifficultyLabel = (difficulty: string) => {
  const difficultyMap: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  };
  return difficultyMap[difficulty] || difficulty;
};

// 获取难度标签样式
const getDifficultyClass = (difficulty: string) => {
  const classMap: Record<string, string> = {
    easy: 'el-tag--success',
    medium: 'el-tag--warning',
    hard: 'el-tag--danger'
  };
  return classMap[difficulty] || '';
};

// 搜索题目
const searchQuestions = () => {
  // 模拟搜索逻辑
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
    ElMessage.success('搜索完成');
  }, 500);
};

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  loadQuestions();
};

const handleCurrentChange = (current: number) => {
  pagination.currentPage = current;
  loadQuestions();
};

// 加载题目数据
const loadQuestions = () => {
  // 模拟加载数据
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
    // 这里应该是实际的加载数据逻辑
  }, 500);
};

// 查看题目详情
const viewQuestionDetail = (question: any) => {
  selectedQuestion.value = { ...question };
  showQuestionDetailModal.value = true;
};

// 新增题目
const addQuestion = () => {
  editingQuestion.value = false;
  // 重置表单
  Object.assign(questionForm, {
    questionId: '',
    type: 'single',
    category: '常识判断',
    difficulty: 'easy',
    content: '',
    options: ['', ''],
    answer: null,
    explanation: '',
    knowledgePoints: []
  });
  newKnowledgePoint.value = '';
  showAddEditModal.value = true;
};

// 编辑题目
const editQuestion = (question: any) => {
  editingQuestion.value = true;
  // 填充表单数据
  Object.assign(questionForm, {
    questionId: question.questionId,
    type: question.type,
    category: question.category,
    difficulty: question.difficulty,
    content: question.content,
    options: question.options || ['', ''],
    answer: question.answer,
    explanation: question.explanation,
    knowledgePoints: [...(question.knowledgePoints || [])]
  });
  newKnowledgePoint.value = '';
  showAddEditModal.value = true;
};

// 删除题目
const deleteQuestion = (question: any) => {
  ElMessageBox.confirm(
    '确定要删除此题吗？此操作不可撤销！',
    '警告',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(() => {
    // 模拟删除题目
    isLoading.value = true;
    setTimeout(() => {
      isLoading.value = false;
      // 更新本地数据
      questionsData.value = questionsData.value.filter(q => q.questionId !== question.questionId);
      ElMessage.success('题目删除成功');
    }, 500);
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 关闭新增/编辑模态框
const closeAddEditModal = () => {
  showAddEditModal.value = false;
  // 重置表单验证
  if (questionForm) {
    // 这里应该重置表单验证状态
  }
};

// 保存题目
const saveQuestion = () => {
  // 模拟保存题目
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
    
    if (editingQuestion.value) {
      // 更新现有题目
      const index = questionsData.value.findIndex(q => q.questionId === questionForm.questionId);
      if (index !== -1) {
        questionsData.value[index] = { ...questionForm };
      }
      ElMessage.success('题目更新成功');
    } else {
      // 新增题目
      const newQuestion = { ...questionForm, questionId: `Q${String(questionsData.value.length + 1).padStart(3, '0')}`, createTime: new Date().toLocaleString('zh-CN'), usageCount: 0, correctRate: 0 };
      questionsData.value.unshift(newQuestion);
      ElMessage.success('题目新增成功');
    }
    
    showAddEditModal.value = false;
  }, 500);
};

// 处理题目类型变化
const handleTypeChange = () => {
  if (questionForm.type === 'judgment' || questionForm.type === 'essay') {
    questionForm.options = [];
  } else {
    if (!questionForm.options || questionForm.options.length === 0) {
      questionForm.options = ['', ''];
    }
  }
  questionForm.answer = null;
};

// 添加选项
const addOption = () => {
  if (questionForm.options.length < 8) {
    questionForm.options.push('');
  } else {
    ElMessage.warning('最多只能添加8个选项');
  }
};

// 删除选项
const removeOption = (index: number) => {
  questionForm.options.splice(index, 1);
  // 如果删除的是当前选中的答案，重置答案
  if (questionForm.type === 'single' && questionForm.answer === index) {
    questionForm.answer = null;
  } else if (questionForm.type === 'multiple' && Array.isArray(questionForm.answer)) {
    questionForm.answer = questionForm.answer.filter((val: number) => val !== index).map((val: number) => val > index ? val - 1 : val);
  }
};

// 添加考点
const addKnowledgePoint = () => {
  if (newKnowledgePoint.value.trim() && !questionForm.knowledgePoints.includes(newKnowledgePoint.value.trim())) {
    questionForm.knowledgePoints.push(newKnowledgePoint.value.trim());
    newKnowledgePoint.value = '';
  }
};

// 删除考点
const removeKnowledgePoint = (index: number) => {
  questionForm.knowledgePoints.splice(index, 1);
};

// 导入题目
const importQuestions = () => {
  // 模拟导入题目
  ElMessage.info('导入题目功能待实现');
};

// 导出题目
const exportQuestions = () => {
  // 模拟导出题目
  ElMessage.success('题目列表导出成功');
};
</script>

<style lang="scss" scoped>
.admin-questions-view {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.page-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 5px 0 0 0;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.search-filters {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.type-select,
.difficulty-select,
.category-select {
  width: 150px;
}

.toolbar-actions {
  display: flex;
  gap: 10px;
}

.stats-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 5px;
}

.stat-icon {
  font-size: 36px;
  color: #6366f1;
  opacity: 0.8;
}

.table-card {
  border-radius: 8px;
  overflow: hidden;
}

.question-content {
  font-size: 14px;
  color: #1f2937;
  word-break: break-word;
  line-height: 1.6;
}

.correct-rate {
  font-size: 14px;
  font-weight: 500;
  color: #10b981;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.question-detail {
  padding: 20px 0;
}

.detail-header {
  padding: 20px 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.question-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.question-id {
  font-size: 14px;
  color: #6b7280;
  font-family: monospace;
}

.category-tag {
  font-size: 14px;
  color: #6366f1;
  background-color: #eef2ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.question-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #6b7280;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.question-content-detail {
  font-size: 16px;
  color: #1f2937;
  line-height: 1.8;
  padding: 20px 0;
  border-bottom: 1px solid #e5e7eb;
}

.options-section,
.answer-section,
.explanation-section,
.knowledge-section {
  margin-top: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #e5e7eb;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 15px;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.option-label {
  font-weight: 600;
  color: #4b5563;
  min-width: 20px;
}

.option-content {
  flex: 1;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.6;
}

.correct-option {
  color: #10b981;
  font-weight: 600;
  font-size: 16px;
}

.answer-content {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.6;
  padding: 10px;
  background-color: #f0fdf4;
  border-radius: 8px;
}

.explanation-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  padding: 10px;
  background-color: #eff6ff;
  border-radius: 8px;
}

.knowledge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.option-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.option-input-label {
  font-weight: 600;
  color: #4b5563;
  min-width: 20px;
}

.option-input {
  flex: 1;
}

.knowledge-input {
  width: 100%;
  margin-bottom: 10px;
}

// 响应式设计
@media (max-width: 1200px) {
  .toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-filters {
    justify-content: flex-start;
  }
  
  .stats-cards {
    flex-wrap: wrap;
  }
  
  .stat-card {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .search-filters {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-input,
  .type-select,
  .difficulty-select,
  .category-select {
    width: 100%;
  }
  
  .stat-card {
    flex: 1 1 100%;
  }
  
  .question-info,
  .question-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .option-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .option-input-label {
    align-self: flex-start;
  }
}
</style>